<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/5
  Time: 10:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>C⭐游戏</title>
    <%@ include file="/common/head.jsp"%>
    <script type="text/javascript">
        $(function () {
            //给加入购物车按钮绑定单击事件
            $("button.addToCart").click(function () {
                //javaScript语言中提供了一个Location地址栏对象
                //它有一个属性href,它可以获取浏览器地址栏中的地址
                //属性href可读可写
                let bookId = $(this).attr("bookId");
                alert("《"+$(this).attr("bookName")+"》添加成功")
                //取标签的自定义属性
                <%--location.href="${pageScope.basePath}cs?action=addItem&id="+bookId;--%>
                /*使用ajax请求，添加商品到购物车*/
                $.getJSON("${pageScope.basePath}cs","action=ajaxAddItem&id="+bookId,
                    function (data) {
                        $("#fontTotalCount").html(data.totalCount);
                    });
            });
        })
    </script>
</head>
<body>
<div>
    <h1 class="TieleStyle" align="center">C⭐游戏展</h1>
    <h6 align="right">
        <a href="os?action=showMyOrders&userId=${sessionScope.user.id}" style="color: darkviolet;text-decoration: none">
            我的订单(<img src="static/img/MyOrder.gif" alt="网络不佳" height="21px" width="23px">)
        </a>
        &nbsp&nbsp&nbsp&nbsp&nbsp
        <a href="pages/UserPages/myShoppingCart.jsp" style="text-decoration: none;color: sandybrown">
            我的（
            <img src="static/img/shoppingCart.gif" alt="网络不佳" height="21px" width="23px">
            <font style="size: 8px" id="fontTotalCount">${sessionScope.cart==null?0:sessionScope.cart.totalCount}</font>
            ）购物车
        </a>
        &nbsp&nbsp&nbsp&nbsp&nbsp
        <a href="pages/ManagerPages/c_manager_HomePage.jsp">管理员入口</a>
    </h6>
</div>
<div>
<%--    左边广告图标--%>
    <table align="left" style="width: 10%">
        <tr>
            <td><img src="static/img/c_book_game_broadside_GTA5.jpg" alt="图片加载失败" width="100%"></td>
        </tr>
        <tr>
            <td><img src="static/img/c_book_game_broadside_HITMON2.jpg" alt="图片加载失败" width="100%"></td>
        </tr>
        <tr>
            <td><img src="static/img/c_book_game_broadside_RAR2.jpg" alt="图片加载失败" width="100%"></td>
        </tr>
    </table>
<%--右边广告图标--%>
    <table align="right" style="width: 10%">
        <tr>
            <td><img src="static/img/c_book_game_broadside_HuiMieZhanShi.jpg" alt="图片加载失败" width="100%"></td>
        </tr>
        <tr>
            <td><img src="static/img/c_book_game_broadside_ZhanZhengLeiTing.jpg" alt="图片加载失败" width="100%"></td>
        </tr>
        <tr>
            <td><img src="static/img/c_book_game_broadside_ZhanDi5.jpg" alt="图片加载失败" width="100%"></td>
        </tr>
    </table>
<%--中间价格搜索栏--%>
    <form action="client/bs" method="get">
        <input type="hidden" name="action" value="${param.min!=""||param.max!=""?"pageByPrice":"page"}">
        <table align="center">
            <tr>
                <td>
                    价格：
                    <input id="min" type="text" name="min" value="${param.min}">
                    -------->
                    <input id="max" type="text" name="max" value="${param.max}">
                    <input type="submit" value="确定">
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        $(function () {
            $("#min").click(function () {
                $("#min").val("");//标签赋值方法1
            });
            $("#max").click(function () {
                this.value="";//标签赋值方法2
            });
        })
    </script>
<%--中间图书显示--%>
    <table border="0" align="center">
        <tr>
            <c:forEach items="${requestScope.page.items}" var="book">
                <td align="center">
                    <img src="${book.img_path}" alt="图片加载失败">
                </td>
            </c:forEach>
        </tr>
        <tr>
            <c:forEach items="${requestScope.page.items}" var="book">
                <td align="center">
                    书名：《${book.name}》<br>
                    作者：${book.author}<br>
                    价格：${book.price}<br>
                    销量：${book.sales}<br>
                    库存：${book.stock}<br>
                    <button bookName="${book.name}" bookId="${book.id}" class="addToCart">加入购物车</button>
                    <%--使用自定义属性bookId--%>
                </td>
            </c:forEach>
        </tr>
    </table>
<%--静态包含，用公共分页条--%>
<%@include file="/common/paging_bar.jsp"%>

</div>
</body>
</html>
